<template>
	<view class="container">

		<view class="top">
			<view style="
			 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
			height: 194px;
			padding-top: 10px;
			padding-left: 10px;">
				<uni-icons type="left" size="20" color="#fff" @click="goToIndex"></uni-icons>
				<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 130px;">维修任务</text>
				<uni-search-bar radius="100" placeholder="输入需要搜索的内容" clearButton="none" cancelButton="none"
					@confirm="search" />
				</uni-section>
				<view class="condition-list">
					<text>共3条</text>
					<text>状态：</text>
					<view class="condition-status" @click="current">
						<uni-data-select v-model="value1" :localdata="range1" @change="change1"></uni-data-select>
					</view>
					<text style="margin-left: -10px;">维修方式：</text>
					<view class="condition-way" @click="current">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>

					</view>
					<view class="example-body">
						<uni-datetime-picker v-model="single">
							<image src="../../static/lili.png" style="width: 20px;height: 20px; margin-right: -5px;">
							</image><text>日期</text>
						</uni-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="content-top" v-for="(item,index) in this.repairList" :key="index">
			<view class="content-up">
				<text>维修单号:{{item.id}}</text>
				<text v-if="item.status == 0">已预约</text>
				<text v-if="item.status == 1">进行中</text>
				<text v-if="item.status == 2">已完成</text>
			</view>
			<view class="content-down">
				<view class="content-down-left">
					<text v-if="item.type == '0'">维修方式：到店维修</text>
					<text v-if="item.type == '1'">维修方式：上门取车</text>
					<text>预约日期：{{item.reservationTime}}</text>
				</view>
				<view class="content-down-right">
					<button class="mini-btn" type="primary" size="mini"
						style="border-radius: 20px; background-color: #1564E6; width: 90px;"
						@click="goToDeatil(item.id)">查看详情</button>
				</view>
			</view>
		</view>


		<view style="height: 180px;">
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				status: '',
				taskStatus: [{
						status: 0,
						text: "进行中"
					},
					{
						status: 1,
						text: "已完成"
					},
				],
				value: 2,
				value1: 3,
				range1: [{
						value: 0,
						text: "已预约"
					},
					{
						value: 1,
						text: "进行中"
					}, {
						value: 2,
						text: "已完成"
					}, {
						value: 3,
						text: "全部"
					}
				],
				range: [{
						value: 0,
						text: "到店维修"
					},
					{
						value: 1,
						text: "上门取车"
					}, {
						value: 2,
						text: "全部"
					}
				],
				didates: ['进行中', '已完成'],
				city: '',
				repairList: [],
				repairListOver: [],
				nowDate: '',
				token: '',
			}
		},
		methods: {
			change(e) {},
			change1(e) {},
			current() {
				if (this.value == 2) {
					this.value = null
				}
				if (this.value1 == 3) {
					this.value1 = null
				}
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/list',
					method: 'GET',
					header: {
						'Authorization': this.token
					},
					data: {
						mid: 101,
						type: this.value,
						status: this.value1,
						reservationTime: this.nowDate
					},
					success: (resp) => {
						this.repairList = resp.data.rows
					}
				})
			},
			goToIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			goToDeatil(id) {
				uni.navigateTo({
					url: '/pages/repairTask/TaskDetail/TaskDetail?id='+id
				})
			},
			onLoad(event) {
				const userinfo = uni.getStorageSync("UserInfo")
				console.log('userinfo', userinfo);
				// 获取当前日期
				var date = new Date();

				// 获取当前月份
				var nowMonth = date.getMonth() + 1;

				// 获取当前是几号
				var strDate = date.getDate();

				// 添加分隔符“-”
				var seperator = "-";

				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}

				// 对月份进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
				this.nowDate = nowDate;
				console.log('now date', nowDate);
				const token = uni.getStorageSync('Token');
				this.token = token
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/list',
					method: 'GET',
					header: {
						'Authorization': "Bearer " + token
					},
					data: {
						mid: 101,
						type: null,
						status: null,
						reservationTime: nowDate
					},
					success: (resp) => {
						console.log('resp1', resp)
						this.repairList = resp.data.rows
						console.log('resp', this.repairList)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		background-color: #2979ff;
		height: 150px;
	}

	.content-top {
		height: 110px;
		background-color: #fff;
		margin: -10px 10px 0; //上，左右，下
		border-radius: 15px;
		padding: 14px 20px;
		margin-bottom: 20px;

	}

	.condition-list {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		flex-wrap: wrap;
		/* 允许换行，如果空间不足时换行 */

	}

	.condition-list text {
		color: #fff;
		font-size: 14px;
	}

	.condition-list text:nth-child(2) {
		margin-left: 10px;
	}

	.condition-status {
		width: 70px;
	}

	.condition-way {
		width: 80px;
	}

	.condition-status,
	.condition-way,
	.example-body {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.condition-status,
	.condition-way {
		margin-left: -10px;
		//margin-right: 10px;
	}

	.example-body {
		margin-right: 0;
	}


	.uni-data-select,
	.uni-datetime-picker {
		margin-left: 5px;
	}

	.content-up {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid #ccc;
		padding: 8px;
	}

	.content-up text:nth-child(1) {
		font-size: 16px;
		font-weight: bold;
	}

	.content-up text:nth-child(2) {
		font-size: 14px;
		color: #2979ff;
	}

	.content-down {
		padding-top: 5px;
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.content-down-left {
		display: flex;
		/* 使用 Flexbox 布局以垂直排列文本 */
		flex-direction: column;
		/* 文本竖着排列 */
		margin-right: 10px;
		/* 文本和按钮之间的间距 */
	}

	.content-down-left text {
		padding: 5px;
		font-size: 14px;
	}

	.content-down-right {
		margin-left: 10px;
	}
</style>